<template>
  <div id="main">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit">连线</span>
        <i class="el-icon-circle-plus-outline"></i>
      </div>
      <div
        class="main"
        @mousedown="mouseOver($event)"
        @mousemove='mouseMove($event)'
        @mouseup='mouseUp($event)'
      >

        <canvas
          id="canvas"
          width="1000"
          height="600"
          ref="canvas"
        ></canvas>
        <div
          class="lineLeft"
          ref="left"
        >
          <div
            class="box"
            v-for="(item,index) in dataArr[0]"
            :key="index"
          >
            {{item.left}}
          </div>

        </div>
        <div
          class="lineRight"
          ref="right"
        >
          <div
            class="box"
            v-for="(item,index) in dataArr[1]"
            :key="index"
          >
            {{item.right}}
          </div>

        </div>
        <div
          id="lines"
          ref="lines"
        >

        </div>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <!-- <el-button @click="generate = false">取 消</el-button>
          <el-button @click="Determine">确 定</el-button> -->
      </span>
    </div>

  </div>
</template>
<script>
import {} from "@/api/page";
export default {
  components: {},
  data() {
    return {
      mid_startx: "",
      mid_starty: "",
      mid_endx: "",
      mid_endy: "",
      context: "",
      over: true,
      dataArr: []
    };
  },
  methods: {
    mouseOver(event) {
      if (event.path[1].className == "lineLeft") {
        this.mid_startx = event.target.getAttribute("left");
        this.mid_starty = event.target.getAttribute("top");
        this.over = false;
      }
      if (event.path[1].className == "lines") {
        event.path[1].remove();
      }
    },
    mouseMove(event) {
      if (this.over == false) {
        var mid_endx = event.layerX;
        var mid_endy = event.layerY;
        this.context.clearRect(0, 0, 1000, 600);
        this.context.beginPath();
        this.context.moveTo(this.mid_startx, this.mid_starty - 60); //设置起点状态
        this.context.lineTo(mid_endx, mid_endy); //设置末端状态

        this.context.lineWidth = "2"; //设置线宽状态
        this.context.strokeStyle = "#0aa4dc"; //设置线的颜色状态
        this.context.stroke();
        this.context.restore();
      } else {
      }
    },
    mouseUp(event) {
      this.over = true;
      if (event.path[1].className == "lineRight") {
        this.context.clearRect(0, 0, 1000, 600); //整个画布清除
        this.mid_endx = event.target.getAttribute("left");
        this.mid_endy = event.target.getAttribute("top");
        var line1 = this.mid_endx - this.mid_startx;
        var line2 = this.mid_endy - this.mid_starty;
        var line3 = Math.round(
          Math.sqrt(Math.pow(line1, 2) + Math.pow(line2, 2))
        );
        var cos = line2 / line3;
        var radina = Math.acos(cos);
        var angle = 90 - Math.floor(180 / (Math.PI / radina));

        var lineBox = document.createElement("div");
        var lineImg = document.createElement("span");
        lineBox.className = "lines";
        lineBox.style =
          "width:" +
          line3 +
          "px;height:" +
          2 +
          "px;left:" +
          this.mid_startx +
          "px; top:" +
          this.mid_starty +
          "px;transform: rotate(" +
          angle +
          "deg) ";
        lineImg.className = "del el-icon-close";
        lineBox.appendChild(lineImg);

        this.$refs.lines.appendChild(lineBox);
      } else {
        this.context.clearRect(0, 0, 1000, 600); //整个画布清除
      }
    },
    lins() {
      for (var i = 0; i < this.$refs.left.children.length; i++) {
        var leftLeft = this.$refs.left.children[i].offsetLeft;
        var leftTop = this.$refs.left.children[i].offsetTop;
        var leftWidth = this.$refs.left.children[i].offsetWidth;
        var leftHeight = this.$refs.left.children[i].clientHeight;
        this.$refs.left.children[i].setAttribute("gpl", i);
        this.$refs.left.children[i].setAttribute("left", leftLeft + leftWidth);
        this.$refs.left.children[i].setAttribute(
          "top",
          leftTop + leftHeight / 2
        );
      }
      for (var i = 0; i < this.$refs.right.children.length; i++) {
        var rightLeft = this.$refs.right.children[i].offsetLeft;
        var rightTop = this.$refs.right.children[i].offsetTop;
        var rightWidth = this.$refs.right.children[i].offsetWidth;
        var rightHeight = this.$refs.right.children[i].offsetHeight;
        this.$refs.right.children[i].setAttribute("gpr", i);
        this.$refs.right.children[i].setAttribute("left", rightLeft);
        this.$refs.right.children[i].setAttribute(
          "top",
          rightTop + rightHeight / 2
        );
      }
    }
  },
  mounted() {
    
    this.context = this.$refs.canvas.getContext("2d");
    console.log(this.$refs.left.children.length)
    this.lins();
  },
  created() {
    this.dataArr = [
      [{ left: "a1" }, { left: "a2" }, { left: "a3" }, { left: "a4" }],
      [{ right: "b1" }, { right: "b2" }, { right: "b3" }, { right: "b4" }]
    ];
  }
};
</script>
<style >
#main .main {
  width: 1000px;
  height: 600px;
  /* padding: 0 auto; */
  background: transparent;
  border: 1px solid #ccc;
  cursor: pointer;
}

#main .lineLeft {
  width: 50%;
  height: 100%;
  float: left;
}

#main .lineRight {
  width: 50%;
  height: 100%;
  float: left;
}

#main .box {
  width: 300px;
  height: 80px;
  margin: 20px auto;
  border: 1px solid #ccc;
  -webkit-user-select: none;
}

#main #canvas {
  position: absolute;
  left: 0;
  z-index: -1;
}
#main .lines {
  transform-origin: left top;
  border-radius: 5px;
  background: #0aa4dc;
  position: absolute;
}
#main .lines:hover {
  background-color: #d81e06;
  border-color: #8c8c8c;
  cursor: pointer;
}
#main .lines:hover .del {
  display: block;
}
#main .del {
  position: absolute;
  left: 45%;
  top: -8px;
  display: none;
  color: red;
  font-size: 20px;
}
</style>
